<template>
    <div class="inner-warp">
        <MainTitleVue title="关注机构" />
        <n-data-table :columns="columns" :data="data" :pagination="pagination" />
    </div>
</template>

<script setup lang='ts'>
import MainTitleVue from "@/components/common/MainTitle.vue";
import { NButton, useDialog, useMessage } from "naive-ui";
import { h } from "@vue/runtime-core";
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRouter } from 'vue-router';

// api访问代理
const { proxy } = getCurrentInstance() as any

// 引入消息函数
const message = useMessage()

// 声明 dialog 对象
const dialog = useDialog()

// 引入路由
const router = useRouter()

const pagination = { pageSize: 10 }

const columns = [
    {
        title: '机构',
        key: 'name',
        align: 'center',
    },
    {
        title: '操作',
        key: 'opitons',
        align: 'center',
        render(row: any) {
            const opitons = buttons.map((acitonName: string) => {
                if (acitonName === '查看') {
                    return h(
                        NButton,
                        {
                            size: 'small',
                            type: 'warning',
                            style: {
                                marginRight: '6px'
                            },
                            onClick: () => toOrg(row)
                        },
                        { default: () => '查看' }
                    )
                } else {
                    return h(
                        NButton,
                        {
                            size: 'small',
                            type: 'error',
                            style: {
                                marginRight: '6px'
                            },
                            onClick: () => deleteOrg(row)
                        },
                        { default: () => '删除' }
                    )
                }
            })
            return opitons
        }
    }
]

let data = ref([])

const buttons = ['查看', '删除']

onMounted(() => {
    init()
})

const init = (() => {
    proxy.$api.user.getOrgStarList().then((result: any) => {
        if (result.success) {
            data.value = result.data
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 取消收藏
const deleteOrg = ((row: any) => {
    dialog.error({
        title: '删除',
        content: '是否确定取消关注？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            proxy.$api.user.starOrg({ id: row.id }).then((result: any) => {
                if (result.success) {
                    for (let index = 0; index < data.value.length; index++) {
                        if (row.id === (data.value[index] as any).id) {
                            data.value.splice(index, 1);
                            break;
                        }
                    }
                    message.success("取消关注成功")
                } else {
                    message.warning(result.msg)
                }
            }).catch(() => {
                message.error('未知错误')
            });
        }
    })
})

// 查看机构
const toOrg = ((row: any) => {
    let router_data = router.resolve({ name: 'Org', params: { id: row.id } })
    window.open(router_data.href, '_blank')
})

</script>

<style scoped>
.inner-warp {
    margin: 50px auto;
    width: 1100px;
}
</style>